<template>
  <CustomNav title="设置中心"></CustomNav>
  <view class="container">
    <view class="content">
      <view class="row" @click="jumpPage('/pagesC/personalCenter/index')">
        <view class="left">个人中心</view>
        <view class="right">
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
    </view>

    <view class="content">
      <view
        class="row"
        @click="handleGoJump(item)"
        v-for="(item, index) in settingStore.navOptionList"
        :key="index"
      >
        <view class="left">{{ item.title }}</view>
        <view class="right">
          <!-- <view class="text">男</view> -->
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
    </view>
    <view class="version">version：1.0.0</view>
  </view>

  <van-dialog id="van-dialog" />
</template>

<script setup>
import CustomNav from "@/components/CustomNav";
import { getItem } from "../../utils/localStorage";
import { Alert, unAlert, jumpPage } from "../../utils/tool";
import useSettingStore from "@/store/modules/setting";

const settingStore = useSettingStore();

// 跳转
const handleGoJump = (item) => {
  if (item.title == "检测更新") {
    uni.showModal({
      title: "温馨提示",
      content: "当前小程序为最新版本！",
      showCancel: false,
      success: function (res) {
        if (res.confirm) {
          console.log("用户点击确定");
        } else if (res.cancel) {
          console.log("用户点击取消");
        }
      },
    });
    return;
  }
  console.log("item：", item);
  item.page && jumpPage(item.page);
};
</script>

<style lang="scss">
.container {
  width: 750rpx;
  // min-height: 100vh;
  background-color: #f5f5f5;
  padding: 25rpx 20rpx;
  min-height: 88vh;

  .content {
    background-color: #fff;
    box-shadow: 0 0 10px $shadow;
    padding: 0 40rpx;
    border-radius: 15rpx;
    margin-bottom: 20rpx;

    .row {
      width: 100%;
      /* height: 150rpx; */
      /* border:1px solid red; */
      border-bottom: 1px solid #dcdcdc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 25rpx 0;
      font-size: 30rpx;
      /* font-weight: 700; */

      &:last-child {
        border: none;
      }

      .left {
        /* width: 420rpx; */
      }

      .right {
        /* width: 460rpx; */
        display: flex;
        align-items: center;
        color: #b5b5b5;

        .text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          .text_ {
            display: flex;
            align-items: center;
          }
        }

        .iconfont {
          margin-left: 20rpx;
        }

        input {
          width: 460rpx;
        }
      }

      /* 个性签名 */
      .sign {
        /* width: 460rpx; */
      }
    }

    /* 头像 */
    .avatar-wrapper {
      button {
        width: 100%;
        height: 100%;
        padding: 0;
        background: transparent;
        /*设置背景颜色一致*/
        border-color: transparent;
        /*设置边框颜色一致*/
        display: flex;
        align-items: center;
        justify-content: space-between;

        &::after {
          border: none;
          /*设置边框取消*/
        }
      }
    }
  }

  .version {
    text-align: center;
    color: #807d7d;
  }

  .logOut {
    padding: 25rpx 40rpx;
    text-align: center;
    margin-top: 20rpx;
    transition: all 0.2s;

    &:active {
      background-color: rgba(0, 0, 0, 0.1);
      /* border:1px solid #fff; */
    }
  }
}

.alert {
  width: 750rpx;
  text-align: center;
  position: fixed;
  bottom: 18rpx;
  font-size: 28rpx;
  /* background-color: $white; */
  color: #807d7d;

  text-shadow: 2px 3px 1px #bdbbbb;
}
</style>
